<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Dialogs</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Android, programming, dialogs, AlertDialog, tutorial, 
Java, mobile development">
<meta name="description" content="In this chapter of the Android tutorial, we will
talk about dialogs.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>Dialogs</h1>


<p>
In this chapter of the Android development tutorial we will talk about dialogs. We will 
discuss the Android AlertDialog.
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
A dialog is defined as a conversation between two or more persons. In a computer application a 
dialog is a window which is used to "talk" to the application. A dialog is used to input data, 
modify data, change the application settings etc. 
</p>

<p>
An <i>AlertDialog</i> is a dialog used to display 
information or receive data. It can display one, two or three buttons. It is created with a Builder subclass.
</p>


<h2>Displaying a message</h2>
 
<p>
We will use the AlertDialog to display a message.
In the example, we do not need to modify the manifest file.
</p>


<div class="codehead">main.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    &gt;
    
    &lt;Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:onClick="onClicked"
        android:text="@string/btn_label" /&gt;
        
&lt;/LinearLayout&gt;
</pre>

<p>
In the <i>main.xml</i> layout file, we have a Button widget.
This button will display an AlertDialog. 
</p>

<div class="codehead">strings.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
    &lt;string name="app_name"&gt;DisplaySize&lt;/string&gt;
    &lt;string name="btn_label"&gt;Show&lt;/string&gt;
&lt;/resources&gt;
</pre>

<p>
This is <i>strings.xml</i> file.
</p>

<div class="codehead">MainActivity.java</div>
<pre class="code">
package com.zetcode.displaysize;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.graphics.Point;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.view.WindowManager;
import android.view.Display;

public class MainActivity extends Activity
{    
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

    public void onClicked(View view)
    {
        Point p = getDisplaySize();

        AlertDialog ad = new AlertDialog.Builder(this).create();

        ad.setTitle("Display size");
        String msg = String.format("Width:%d, Height:%d", p.x, p.y);
        ad.setMessage(msg);
        ad.setIcon(android.R.drawable.ic_dialog_info);

        ad.setButton("OK", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {
                dialog.cancel();
            }
        });

        ad.show();     
    }

    public Point getDisplaySize()
    {
        WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE);
        Display ds = wm.getDefaultDisplay();

        Point p = new Point();
        ds.getSize(p);

        return p;
    }
}
</pre>

<p>
We use the AlertDialog to display the size of the display. 
</p>

<pre class="explanation">
Point p = getDisplaySize();
</pre>

<p>
In the custom getDisplaySize() method, we determine the size of
the display.
</p>

<pre class="explanation">
AlertDialog ad = new AlertDialog.Builder(this).create();
</pre>

<p>
An instance of the <code>AlertDialog</code> is created.
</p>

<pre class="explanation">
ad.setTitle("Display size");
String msg = String.format("Width:%d, Height:%d", p.x, p.y);
ad.setMessage(msg);
ad.setIcon(android.R.drawable.ic_dialog_info);
</pre>

<p>
We set a title, message and an icon for the dialog.
</p>

<pre class="explanation">
ad.setButton("OK", new DialogInterface.OnClickListener() {
    public void onClick(DialogInterface dialog, int which) {
        dialog.cancel();
    }
});
</pre>

<p>
We add a button to the dialog. When we click on the OK button, the
dialog is closed.
</p>

<pre class="explanation">
ad.show();
</pre>

<p>
The <code>show()</code> method shows the dialog.
</p>

<pre class="explanation">
WindowManager wm = (WindowManager) getSystemService(WINDOW_SERVICE);
Display ds = wm.getDefaultDisplay();
</pre>

<p>
We get the default display.
</p>

<pre class="explanation">
Point p = new Point();
ds.getSize(p);
</pre>

<p>
We find out the size of the display with the <code>getSize()</code> method.
</p>

<img src="/img/java/android/alertdialog.png" alt="AlertDialog showing the size of the display">
<div class="figure">
Figure: AlertDialog showing the size of the display
</div>


<h2>Receiving data</h2>
 
<p>
The second example uses the AlertDialog to receive data from a user. 
The dialog will ask a user for his name. It will then display the input
in a TextView widget.
</p>

<p>
The manifest file is not modified.
</p>


<div class="codehead">main.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    &gt;
    
    &lt;Button
        android:id="@+id/btnId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:onClick="onClicked"
        android:text="@string/btn_label" /&gt;   
        
    &lt;TextView
        android:id="@+id/tvId"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" /&gt;
        
&lt;/LinearLayout&gt;
</pre>

<p>
This is <i>main.xml</i> file. We have a Button widget and a
TextView widget. The button will show the dialog window. The TextView
will receive the input text from the dialog.
</p>

<div class="codehead">strings.xml</div>
<pre class="code">
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;resources&gt;
    &lt;string name="app_name"&gt;InputDialog&lt;/string&gt;
    &lt;string name="btn_label"&gt;Show dialog&lt;/string&gt;
&lt;/resources&gt;
</pre>

<p>
This is the <i>strings.xml</i> resource file. 
</p>


<div class="codehead">MainActivity.java</div>
<pre class="code">
package com.zetcode.input;

import android.app.Activity;
import android.os.Bundle;
import android.app.AlertDialog;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
import android.content.DialogInterface;

public class MainActivity extends Activity
{
    private TextView tv;
 
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        tv = (TextView) findViewById(R.id.tvId);
    }

    public void onClicked(View view)
    {
        AlertDialog.Builder ad = new AlertDialog.Builder(this);

        ad.setTitle("Input");
        ad.setMessage("Enter your name");

        final EditText input = new EditText(this);
        ad.setView(input);

        ad.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
        public void onClick(DialogInterface dlg, int which) {
            String val = input.getText().toString();
            String msg = String.format("Hello %s!", val);
            tv.setText(msg);
          }
        });

        ad.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
          public void onClick(DialogInterface dlg, int which) {
            dlg.cancel();
          }
        });

        ad.show();
    }
}
</pre>

<p>
Clicking on the button widget will display the AlertDialog. It has an EditText
to receive the input from a user. 
</p>

<pre class="explanation">
AlertDialog.Builder ad = new AlertDialog.Builder(this);

ad.setTitle("Input");
ad.setMessage("Enter your name");
</pre>

<p>
We set a title and a message for the dialog.
</p>

<pre class="explanation">
final EditText input = new EditText(this);
ad.setView(input);
</pre>

<p>
We add the <code>EditText</code> widget to the dialog.
</p>

<pre class="explanation">
ad.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dlg, int which) {
    String val = input.getText().toString();
    String msg = String.format("Hello %s!", val);
    tv.setText(msg);
    }
});
</pre>

<p>
Clicking on the OK button of the dialog, we get the text from the EditText widget.
The text used to format a greeting which is set to the TextView.
</p>

<pre class="explanation">
ad.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
    public void onClick(DialogInterface dlg, int which) {
    dlg.cancel();
    }
});
</pre>

<p>
Clicking on the Cancel button will dismiss the dialog. 
</p>


<img src="/img/java/android/inputdialog.png" alt="Receiving input">
<div class="figure">
Figure: Receiving input
</div>


<p>
In this chapter of the Android development tutorial, we have shown two cases of the AlertDialog.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>
<br> 



<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified November 23, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

